<template>
	<body-wrap isFlex>
		<view class="orderItemBox">
			<view class="title">专家信息：</view>
			<view class="infoBox">
				<view class="imgbox">
					<cm-image  v-if="userInfo._id" :src="userInfo.avatar"/>
				</view>
				<view class="top-con">
					<view class="name">{{item}}小鱼儿（Luck）<text class="bzhi">专家</text></view>
					<view class="intro">
						意见纬来 | 职业 | 职位
					</view>
				</view>
			</view>
		</view>
		<view class="orderItemBox">
			<view class="title">问题描述：</view>
			<view class="qams">小规模纳税人增值税是季报的,那抄税清卡是不是也是每个季度操作一次? 答:不是的,报税是季报,但是抄税清卡必须每个月都要操作一次,否则不能购买发票</view>
		</view>
		
		<view class="linkList">
			<view class="item">
				<label class="name">优惠券</label>
				<view class="lwb">无优惠券可用</view>
				<view class="icon"><cm-image src="static/images/sjt.png"/></view>
			</view>
		</view>
		<view class="linkList">
			<view class="item" @click="openPop">
				<label class="name">咨询包</label>
				<view class="lwb">2个咨询包可用</view>
				<view class="icon"><cm-image src="static/images/sjt.png"/></view>
			</view>
		</view>
		
		<template #footer>
			<view class="ftopbox">
				<view class="price">合计：<text class="fh">￥<text class="num">63.25</text></text></view>
				<view class="btn">
					<view class="myBtn">提交订单</view>
				</view>
			</view>
		</template>
		
		<uni-popup ref="popup">
			<view class="zxbbox">
				<view class="zxbmain">
					<radio-group @change="radioChange">
						<view class="zxbInfo">
							<view class="xxbox">
								<view class="name">咨询包（包年）</view>
								<view class="express">有效期：2023-12-15 ~ 2024-12-15</view>
							</view>
							<view class="rdbox"><radio value="1"/></view>
						</view>
						<view class="zxbInfo">
							<view class="xxbox">
								<view class="name">咨询包（包次）</view>
								<view class="syqk">使用情况：已使用1次，剩余9次</view>
								<view class="express">有效期：2023-12-15 ~ 2024-12-15</view>
							</view>
							<view class="rdbox"><radio value="1"/></view>
						</view>
					</radio-group>
				</view>
				<view class="scBtn">
					<div class="myBtn" @click="comfirm">确定使用</div>
				</view>
			</view>
		</uni-popup>
		
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cmImage from "@/components/cmImage/index.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			cmImage
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				zxbId:''
			})
			
			onMounted(()=>{
				
			})
			
			const openPop = ()=>{
				proxy.$refs.popup.open('bottom')
			}
			
			const radioChange =(e)=> {
				console.log(e);
				state.zxbId = e.detail.value
			}
			
			const comfirm = ()=>{
				proxy.$refs.popup.close()
			}
			
			return {
				...toRefs(state),
				openPop,
				radioChange,
				comfirm
			}
		}
	})
</script>

<style lang="scss" scoped>
	.orderItemBox{
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 0 5px #eee;
		&.orderItemBox{
			margin-top: 20rpx;
		}
		.title{
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
			padding: 0 0 20rpx 0;
		}
		.qams{
			font-size: 28rpx;
			color: #999;
			line-height: 46rpx;
		}
	}
	.infoBox{
		display: flex;
		.imgbox{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
		}
		.top-con{
			padding: 0 0 0 20rpx;
			flex-shrink: 0;
			height: 0;
			.name{
				display: flex;
				height: 50rpx;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				padding: 0;
				margin: 0;
				.bzhi{
					background-color: #ff1120;
					font-size: 22rpx;
					color: #fff;
					padding: 0 8rpx;
					border-radius: 5rpx;
				}
			}
			.intro{
				color: #999;
				font-size: 28rpx;
				height: 50rpx;
				line-height: 50rpx;
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}
	.ftopbox{
		display: flex;
		height: 100rpx;
		align-items: center;
		background-color: #fff;
		box-shadow: 0 0 5px #eee;
		padding: 0 20rpx;
		.price{
			flex: 1;
			font-size: 30rpx;
			.fh{
				color: #ff1120;
				.num{
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
		.btn{
			width: 200rpx;
		}
	}
	.linkList{
		.item{
			display: flex;
			align-items: center;
			height: 80rpx;
			box-shadow: 0 0 5px #eee;
			padding: 0 20rpx;
			font-size: 30rpx;
			background: #fff;
			&.item{
				margin-top: 20rpx;
			}
			.name{
				flex: 1;
				flex-shrink: 0;
				color: #333;
			}
			.lwb{
				color: #999;
				font-size: 28rpx;
			}
			.icon{
				width: 50rpx;
				height: 50rpx;
				overflow: hidden;
				opacity: 0.5;
				transform: rotate(90deg);
				-webkit-transform: rotate(90deg); 
			}
		}
	}
	.zxbbox{
		display: flex;
		flex-flow: column;
		min-height:500rpx;
		background: #fff;
		border-top-left-radius:30rpx ;
		border-top-right-radius:30rpx ;
		padding: 0;
		background-color: #f7f8fa;
		.zxbmain{
			flex: 1;
			flex-shrink: 0;
			padding: 20rpx;
			padding-top: 40rpx;
			.zxbInfo{
				display: flex;
				border-radius: 15rpx;
				box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
				background: #fff;
				padding: 20rpx;
				&+.zxbInfo{
					margin-top: 20rpx;
				}
				.xxbox{
					flex: 1;
					flex-shrink: 0;
					line-height: 50rpx;
					.name{
						font-size: 30rpx;
						font-weight: bold;
					}
					.express{
						font-size: 28rpx;
						color: #999;
						padding: 0;
					}
				}
				.rdbox{
					display: flex;
					align-items: center;
					padding: 0 0 0 15rpx;
				}
			}
		}
		.scBtn{
			background-color: #fff;
			padding: 20rpx 30rpx;
		}
	}
	
	
</style>
